/**
 * @page: 企业认证
 */

import React, { useState } from 'react';
import styles from './index.module.less'
import { InputNumber, Button } from 'antd';
import CommonTable from '@/components/CommonTable';

export default () => {

  let initData = [
    {
      weight: '1KG',
      weightNum: 1,
      zjfFreight: '2.2元',
      zjfFreightNum: 2.2,
      freight: undefined,
      amount: undefined
    },
    {
      weight: '2KG',
      weightNum: 2,
      zjfFreight: '2.6元',
      zjfFreightNum: 2.6,
      freight: undefined,
      amount: undefined
    },
    {
      weight: '3KG',
      weightNum: 3,
      zjfFreight: '3.1元',
      zjfFreightNum: 3.1,
      freight: undefined,
      amount: undefined
    }
  ]

  const [money1, setMoney1] = useState('0.00')
  const [money2, setMoney2] = useState('0.00')
  const [money3, setMoney3] = useState('0.00')
  const [data, setData] = useState(initData)

  const freightChange = (item, e, index) => {
    data[index].freight = e
    setData(data)
  }

  const amountChange = (item, e, index) => {
    data[index].amount = e
    setData(data)
  }

  const limitDecimals1 = value => {
    const reg = /^(\-)*(\d+)\.(\d\d).*$/;
    if (typeof value === 'string') {
      return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
    } else if (typeof value === 'number') {
      return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
    } else {
      return ''
    }
  };

  const limitDecimals2 = value => {
    return value.replace(/^(0+)|[^\d]+/g, '')
  };

  const calculation = () => {
    let day = 0
    let moth = 0
    let year = 0
    data.map(item => {
      if (item.freight && item.amount) {
        day += (item.freight - item.zjfFreightNum) * item.amount
        moth += ((item.freight - item.zjfFreightNum) * item.amount) * 30
        year += ((item.freight - item.zjfFreightNum) * item.amount) * 365
      }
    })
    setMoney3(day.toFixed(2))
    setMoney2(moth.toFixed(2))
    setMoney1(year.toFixed(2))
  }

  const columns = [
    {
      title: "重量",
      dataIndex: "weight",
      key: "weight",
    },
    {
      title: `${APP_TITLE}运费`,
      dataIndex: "zjfFreight",
      key: "zjfFreight"
    },
    {
      title: "现运费",
      dataIndex: "freight",
      key: "freight",
      render: (text, item, index) => (
        // <Input type="text" onChange={(e) => freightChange(item, e)} />
        <InputNumber min={0} step={0.01} formatter={limitDecimals1} parser={limitDecimals1} onChange={(e) => freightChange(item, e, index)} />
      )
    },
    {
      title: "单量",
      dataIndex: "amount",
      key: "amount",
      render: (text, item, index) => (
        // <Input type="text" onChange={(e) => amountChange(item, e)} />
        <InputNumber min={0} formatter={limitDecimals2} parser={limitDecimals2} onChange={(e) => amountChange(item, e, index)} />
      )
    },
  ]

  const TableProps = {
    data,
    columns,
    rowKey: 'weight'
  }

  return (
    <div className={styles.main}>
      <h1 className="page-title" style={{ paddingTop: 36 }}>{APP_TITLE}运费计算</h1>
      <h2>{money1}元</h2>
      <h3>全年可省</h3>
      <div className={styles.moneyWrap}>
        <span>每月省：{money2}元</span>
        <span>每天省：{money3}元</span>
      </div>
      <CommonTable  {...TableProps} />
      <Button type='primary' className={styles.btn} onClick={calculation} size='large' >计算运费</Button>
    </div>
  )
}